<template>
  <div id="app">
    <el-container>
      <el-header>
        <div style="width: 1200px;margin: 0 auto;">
          <div style="float: left" class="logo">
            <a href="/"></a>
          </div>
          <div style="float: left">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                     text-color="#222222">
              <el-submenu index="2">
                <template slot="title">地区</template>
                <el-submenu index="2-1" style="">
                  <template slot="title">宁波</template>
                  <el-menu-item index="2-1-1">海曙区</el-menu-item>
                  <el-menu-item index="2-1-2">江东区</el-menu-item>
                  <el-menu-item index="2-1-3">江北区</el-menu-item>
                  <el-menu-item index="2-1-4">镇海区</el-menu-item>
                  <el-menu-item index="2-1-5">北仑区</el-menu-item>
                  <el-menu-item index="2-1-6">鄞州区</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-menu-item index="3"><a href="detail">买车</a></el-menu-item>
              <el-menu-item index="4"><a href="saleCar">卖车</a></el-menu-item>
              <el-menu-item index="5"><a href="forumIndex">论坛</a></el-menu-item>
              <el-menu-item index="6"><a href="serviceGuarantee">服务保障</a></el-menu-item>
              <el-menu-item index="7"><a href="partnerView">加盟合伙人</a></el-menu-item>
            </el-menu>
          </div>
          <div id="logoright" style="float: right">
            <span style="color: #222222;margin-left: 3px">400-026-9017</span>
            <el-divider direction="vertical"></el-divider>
<!--            <a href="/login" class="dl" style="text-decoration: none;position: relative;color: #222222;-->
<!--                            top: -2px" id="login">登录</a>-->
            <ul class="dl" style="text-decoration: none;position: relative;color: #222222;top: -2px;margin-top: -19px;margin-right: 3px" id="login">
              <li v-if="isLogin == false">
                <a  style="font-size: 13px;color:black" href="login">登录</a>
              </li>
              <li v-else>
                <scan  style="font-size: 13px; color:black;margin-left: 3px">{{ this.username }}</scan>
              </li>
              <li v-if="isLogin == false">
                <a  style="font-size: 13px;color:black" href="register">注册</a>
              </li>
              <li v-else>
                <input  type="button" style="font-size: 13px; width: 40px; color: black; background-color: #e14800; border: none" value="登出" @click="logout">
              </li>
            </ul>
          </div>
        </div>
      </el-header>
      <el-main>
        <div style="width: 1200px;margin: 0 auto;">
          <el-breadcrumb separator-class="el-icon-arrow-right" class="font5">
            <el-breadcrumb-item :to="{ path: '/' }">宁波二手车</el-breadcrumb-item>
            <el-breadcrumb-item>宁波二手车出售</el-breadcrumb-item>
            <div class="search-box" style="float: right;position: relative;top: 0px;">
              <el-row class="demo-autocomplete">
                <el-col :span="24">
                  <el-autocomplete
                      class="inline-input"
                      v-model="select.keywords"
                      :fetch-suggestions="querySearch"
                      placeholder="请输入内容"
                      :trigger-on-focus="false"
                      @select="searchResult"
                      style="border:1px solid black;border-radius: 30px"
                  ></el-autocomplete>
                  <div class="search-btn1">
                    <el-button icon="el-icon-search"
                               style="border: 0px;color:#000000;background-color: rgba(0,0,0,0);" @click="searchByKeywords(1,pageSize)"></el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-breadcrumb>
        </div>
        <div style="width: 1200px;height: 203px;background-color: #f1f0f0;margin: 10px auto;">
          <div style="width: 1150px;height: 183px;background-color: #f1f0f0;margin: 10px auto;padding: 10px">
            <div class="label">
              <span text-color="#999">品牌：</span>
              <el-link @click="sear('大众',1,12)"  target="_blank" > 大众</el-link>
              <el-link @click="sear('宝马',1,12)" target="_blank" > 宝马</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('五菱汽车',1,12)" target="_blank"> 五菱汽车</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('林肯',1,12)" target="_blank"> 林肯</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('雷克萨斯',1,12)" target="_blank"> 雷克萨斯</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('讴歌',1,12)" target="_blank"> 讴歌</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('江淮',1,12)" target="_blank"> 江淮</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('众泰',1,12)" target="_blank"> 众泰</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('荣威',1,12)" target="_blank"> 荣威</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('红旗',1,12)" target="_blank"> 红旗</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('本田',1,12)" target="_blank"> 本田</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('保时捷',1,12)" target="_blank"> 保时捷</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('丰田',1,12)" target="_blank"> 丰田</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('哈佛',1,12)" target="_blank"> 哈佛</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('奥迪',1,12)" target="_blank"> 奥迪</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('jeep',1,12)" target="_blank"> jeep</el-link>
            </div>
            <el-divider></el-divider>
            <div class="label">
              <span text-color="#999">车系：</span>
              <el-link @click="sear('高尔夫',1,12)" target="_blank"> 高尔夫</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('宝马3系',1,12)" target="_blank"> 宝马3系</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('荣威RX5',1,12)" target="_blank"> 荣威RX5</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('奥迪Q3',1,12)" target="_blank"> 奥迪Q3</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('哈佛F5',1,12)" target="_blank"> 哈佛F5</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('奕泽IZOA',1,12)" target="_blank"> 奕泽IZOA</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('Macan',1,12)" target="_blank"> Macan</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('雅阁',1,12)" target="_blank"> 雅阁</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('红旗HS5',1,12)" target="_blank"> 红旗HS5</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('瑞风S3',1,12)" target="_blank"> 瑞风S3</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('众泰T600',1,12)" target="_blank"> 众泰T600</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('一汽-大众CC',1,12)" target="_blank"> 一汽-大众CC</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('讴歌CDX',1,12)" target="_blank"> 讴歌CDX</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('雷克萨斯RX经典',1,12)" target="_blank"> 雷克萨斯RX经典</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('航海家(进口)',1,12)" target="_blank"> 航海家(进口)</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="sear('宏光MINIEV',1,12)" target="_blank"> 宏光MINIEV</el-link>
            </div>
            <el-divider></el-divider>
            <div class="label">
              <span text-color="#999">价格：</span>
              <el-link @click="searByPrice(0,3,1,12)" target="_blank"> 3万以下</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="searByPrice(3,5,1,12)" target="_blank"> 3-5万</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="searByPrice(5,8,1,12)" target="_blank"> 5-8万</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="searByPrice(8,10,1,12)" target="_blank"> 8-10万</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="searByPrice(10,15,1,12)" target="_blank"> 10-15万</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="searByPrice(15,20,1,12)" target="_blank"> 15-20万</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="searByPrice(20,30,1,12)" target="_blank"> 20-30万</el-link>
              <el-link target="_blank"></el-link>
              <el-link @click="searByPrice(30,100000,1,12)" target="_blank"> 30万以上</el-link>
            </div>
            <el-divider></el-divider>
            <div class="label">
              <span text-color="#999">更多：</span>
              <el-row class="block-col-2">
                <el-col :span="3">
                  <span class="demonstration"></span>
                  <el-dropdown>
                                <span class="el-dropdown-link">
                                车型<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                    <el-dropdown-menu slot="dropdown">
                      <template>
                        <div>
                          <el-checkbox-group v-model="checkList1" @change="selectBox1" :max="1">
                          <el-checkbox  label="小型车" border :checked="true"></el-checkbox>
                          <el-checkbox  label="SUV" border></el-checkbox>
                          <el-checkbox  label="跑车" border></el-checkbox>
                          <el-checkbox  label="商务车" border></el-checkbox>
                          <el-checkbox  label="豪华车" border></el-checkbox>
                          <el-checkbox  label="舒适车" border></el-checkbox>
                          <el-checkbox  label="性价车" border></el-checkbox>
                          </el-checkbox-group>
                          <el-button type="primary"  @click="searTypes()">确定</el-button>
                        </div>
                      </template>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
                <el-col :span="3">
                  <span class="demonstration"></span>
                  <el-dropdown>
                                <span class="el-dropdown-link">
                                车龄<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                    <el-dropdown-menu slot="dropdown">
                      <template>
                        <div>
                          <el-checkbox-group v-model="checkList2" @change="selectBox2" :max="1">
                          <el-checkbox label="1年以内" border :checked="true"></el-checkbox>
                          <el-checkbox label="3年以内" border></el-checkbox>
                          <el-checkbox label="5年以内" border></el-checkbox>
                          <el-checkbox label="10年以内" border></el-checkbox>
                          </el-checkbox-group>
                          <el-button type="primary" @click="searTypes()">确定</el-button>
                        </div>
                      </template>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
                <el-col :span="3">
                  <span class="demonstration"></span>
                  <el-dropdown>
                                <span class="el-dropdown-link">
                                变速箱<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                    <el-dropdown-menu slot="dropdown">
                      <template>
                        <div>
                          <el-checkbox-group v-model="checkList3" @change="selectBox3" :max="1">
                          <el-checkbox label="自动" border :checked="true"></el-checkbox>
                          <el-checkbox label="手动" border></el-checkbox>
                          </el-checkbox-group>
                          <el-button type="primary" @click="searTypes()">确定</el-button>
                        </div>
                      </template>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </div>
          </div>
          <div>
            <el-radio-group v-model="radio1">
              <el-radio-button label="宁波二手车出售"></el-radio-button>
              <el-radio-button label="价格最高" @click.native.prevent="searPriceBig(1,12)"></el-radio-button>
              <el-radio-button label="价格最低" @click.native.prevent="searPriceSmall(1,12)"></el-radio-button>
              <el-radio-button label="最新发布" @click.native.prevent="searTimeNew(1,12)"></el-radio-button>
              <el-radio-button label="里程最短" @click.native.prevent="searMileageSmall(1,12)"></el-radio-button>
              <el-radio-button label="车龄最短" @click.native.prevent="searOldSmall(1,12)"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <br>

        <div style="width: 1200px;margin: 25px auto;">
          <div>
            <div class="neirong" style="margin: 25px -200px;">
              <el-row style="margin-left: 0px;width: 1200px;height: 690px;">
                <el-col :span="2" v-for="(item, index) in carArr" :key="index" :offset="4"class="" >
                  <el-card :body-style="{ padding: '0px' }"class="card-box">
                    <div><img :src="item.url" class="card-box-image"></div>
                    <div style="padding: 14px;">
                      <span>{{item.carLogo}}</span>
                      <div class="bottom clearfix">
                        <div><p class="card-box-time">{{item.model}}</p></div>
                        <div>
                          <p style="margin-top: 45px"><span style="font-size: 20px;color: coral;">{{item.price}}万元
                                                    </span>
                            <span style="font-size: 14px;color: rgba(0,0,0,.36);">{{item.course}}万公里</span>
                            <span><el-button type="text" class="card-box-button" @click="getModel(item.model)">咨询</el-button></span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              <div style="width: 50%;margin: 405px auto">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </el-main>
      <el-header>
        <div style="background: #DCDADB">
          <div id="ft_top">
            <div>
              <h3>关于我们</h3>
              <p>
                <el-link href="index.html" icon="el-icon-link">网站首页</el-link>
                <el-link href="introduction.html" icon="el-icon-link">关于我们</el-link>
              </p>
              <p>
                <el-link href="" icon="el-icon-link">加入我们</el-link>
                <el-link href="" icon="el-icon-link">联系我们</el-link>
              </p>
            </div>
            <div>
              <h3>联系我们</h3>
              <p>
                <el-link href="" icon="el-icon-link">网站:http://localhost:8080/index.html</el-link>
              </p>
              <p>
                <el-link href="" icon="el-icon-link">微博:</el-link>
              </p>
              <p>
                <el-link href="" icon="el-icon-link">客服电话:</el-link>
              </p>
            </div>
            <div>
              <h3>关注我们</h3>
            </div>
          </div>
        </div>
        <div style="background-color: #363636">
          <div id="ft_bottom">
            <p>
              <a href="">手机版</a>
              <el-divider direction="vertical"></el-divider>
              <a href="">个人收藏</a>
              <el-divider direction="vertical"></el-divider>
              <a href="">小黑屋</a>
              <el-divider direction="vertical"></el-divider>
              <a href="">严选车-放心二手车-爱车人懂车人聚集地</a>
            </p>
            <p>京ICP备 14030440号</p>
            <p>地址：北京市朝阳区北苑东路中国铁建广场B座19-21层 电话: 400-670-1080</p>
          </div>
        </div>
      </el-header>
    </el-container>
  </div>
</template>

<script>

export default {
  name: "detail",
  data: function () {
    return {
      username: '',
      isLogin: false,
      radio1: '',
      modelGo:'',
      state: '',
      checkList1:[],
      values1:[],
      labels1:[],
      vehicle:'小型车',
      checkList2:[],
      values2:[],
      labels2:[],
      carage:'1年以内',
      checkList3:[],
      values3:[],
      labels3:[],
      carcase:'自动',
      activeIndex: '1',
      activeIndex2: '1',
      dq: "海曙区",
      restaurants: [],
      select: {
        keywords: '',
      },
      selectByName:'',
      input: '',
      carArr: [],
      total: 10,
      currentPage: 1,
      pageSize: 12,
      isSelect: false
    }
  },
  methods: {
    logout(){
      localStorage.clear();
      location.reload();
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        {"value": "奔驰C级"},
        {"value": "奔驰E级"},
        {"value": "奔驰GLC"},
        {"value": "奔驰GLE"},
        {"value": "奔驰S级"},
        {"value": "迈巴赫"},
        {"value": "奥迪A4L"},
        {"value": "奥迪A6L"},
        {"value": "奥迪Q5L"},
        {"value": "奥迪A8"},
        {"value": "奥迪R8"},
        {"value": "宝马3系"},
        {"value": "宝马5系"},
        {"value": "路虎"},
        {"value": "野马"},
      ];
    },
    getModel(model){
      this.modelGo=model;
      this.callback(this.modelGo);

    },
    callback(modelGo) {
      this.$router.push({
        name:'buyCar',
        query:{
          modelGo:modelGo,
        }
      });
      console.log(modelGo);
    },
    searchResult(){
      this.restaurants = this.loadAll();
    },
    searchByKeywords(page,pageSize) {
      this.isSelect = true;
      let url = 'http://localhost:5081/detail/select?'+this.qs.stringify(this.select)+ '&page='+page+'&pageSize=' + pageSize;
      console.log(url);
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult);
        if (jsonResult.state == 200){
          let data = jsonResult.data;
          this.currentPage = data.page;
          this.total = data.total;
          this.carArr = data.list;
        }else {
          this.$alert(jsonResult.message,'操作失败',{
            confirmButtonText:'确定',
            callback: action =>{}
          })
        }
      })
    },
    handleCurrentChange(val) {
      if(this.isSelect){
        this.searchByKeywords(val,this.pageSize);
      }else {
        this.pageSelect(val,this.pageSize)
      }
    },
    pageSelect(page,pageSize){
      let url = 'http://localhost:5081/detail/select?page='+page+'&pageSize='+pageSize;
      this.axios.get(url).then((response)=>{
        let jsonResult = response.data();
        if (jsonResult.state == 200){
          let data = jsonResult.data;
          this.currentPage = data.page;
          this.total = data.total;
        }else {
          this.$alert(jsonResult.message,'操作失败',{
            confirmButtonText:'确定',
            callback:action => {}
          })
        }
      })
    },
    sear(keywords, page, pageSize) {
      this.isSelect = true;
      let url = 'http://localhost:5081/detail/select?'+'&keywords=' + keywords + '&page=' + page + '&pageSize=' + pageSize;
      console.log(url);
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult);
        if (jsonResult.state == 200) {
          let data = jsonResult.data;
          this.currentPage = data.page;
          this.total = data.total;
          this.carArr = data.list;
          if(this.carArr.length==0) {
            this.$alert(jsonResult.message, '暂无此车型,敬请期待', {
              confirmButtonText: '确定',
              callback: action => {
              }
            })
          }else{
            this.currentPage = data.page;
            this.total = data.total;
            this.carArr = data.list;
          }
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        }
      })
    },
    searByPrice(price1,price2, page, pageSize) {
      this.isSelect = true;
      let url = 'http://localhost:5081/detail/selectByPrice?'+'&price1=' + price1 + '&price2=' + price2 +'&page=' + page + '&pageSize=' + pageSize;
      console.log(url);
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult);
        if (jsonResult.state == 200) {
          let data = jsonResult.data;
          this.currentPage = data.page;
          this.total = data.total;
          this.carArr = data.list;
          if(this.carArr.length==0) {
            this.$alert(jsonResult.message, '暂无此车型,敬请期待', {
              confirmButtonText: '确定',
              callback: action => {
              }
            })
          }else{
            this.currentPage = data.page;
            this.total = data.total;
            this.carArr = data.list;
          }
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        }
      })
    },
    selectBox1(val){
      console.log("val",val);
      this.values1=[];
      this.labels1=[];
      val.forEach(item=>{
        const value=item.split(':')[0];
        const label=item.split(':')[1];
        this.values1.push(value);
        this.labels1.push(label);
      });
      console.log("this.values1",this.values1,);
      console.log("this.labels1",this.labels1,);
      this.vehicle=this.values1[0];
    },
    selectBox2(val){
      console.log("val",val);
      this.values2=[];
      this.labels2=[];
      val.forEach(item=>{
        const value=item.split(':')[0];
        const label=item.split(':')[1];
        this.values2.push(value);
        this.labels2.push(label);
      });
      console.log("this.values2",this.values2,);
      console.log("this.labels2",this.labels2,);
      this.carage=this.values2[0];
    },
    selectBox3(val){
      console.log("val",val);
      this.values3=[];
      this.labels3=[];
      val.forEach(item=>{
        const value=item.split(':')[0];
        const label=item.split(':')[1];
        this.values3.push(value);
        this.labels3.push(label);
      });
      console.log("this.values3",this.values3,);
      console.log("this.labels3",this.labels3,);
      this.carcase=this.values3[0];
    },
    searTypes(vehicle,carage,carcase,page, pageSize) {
      this.isSelect = true;
      let url = 'http://localhost:5081/detail/searTypes?'+'&vehicle=' + this.vehicle + '&carage=' + this.carage +'&carcase=' + this.carcase +'&page='+1+'&pageSize=' + 12;
      console.log(url);
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult);
        if (jsonResult.state == 200) {
          let data = jsonResult.data;
          this.currentPage = data.page;
          this.total = data.total;
          this.carArr = data.list;
          if(this.carArr.length==0) {
            this.$alert(jsonResult.message, '暂无此车型,敬请期待', {
              confirmButtonText: '确定',
              callback: action => {
              }
            })
          }else{
            this.currentPage = data.page;
            this.total = data.total;
            this.carArr = data.list;
          }
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        }
      })
    },
    searPriceBig(page,pageSize) {
      this.isSelect = true;
      let url = 'http://localhost:5081/detail/searPriceBig?'+'&page='+page+'&pageSize=' + pageSize;
      console.log(url);
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult);
        if (jsonResult.state == 200){
          let data = jsonResult.data;
          this.currentPage = data.page;
          this.total = data.total;
          this.carArr = data.list;
        }else {
          this.$alert(jsonResult.message,'操作失败',{
            confirmButtonText:'确定',
            callback: action =>{}
          })
        }
      })
    },
    searPriceSmall(page,pageSize) {
      this.isSelect = true;
      let url = 'http://localhost:5081/detail/searPriceSmall?'+'&page='+page+'&pageSize=' + pageSize;
      console.log(url);
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult);
        if (jsonResult.state == 200){
          let data = jsonResult.data;
          this.currentPage = data.page;
          this.total = data.total;
          this.carArr = data.list;
        }else {
          this.$alert(jsonResult.message,'操作失败',{
            confirmButtonText:'确定',
            callback: action =>{}
          })
        }
      })
    },
    searTimeNew(page,pageSize) {
      this.isSelect = true;
      let url = 'http://localhost:5081/detail/searTimeNew?'+'&page='+page+'&pageSize=' + pageSize;
      console.log(url);
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult);
        if (jsonResult.state == 200){
          let data = jsonResult.data;
          this.currentPage = data.page;
          this.total = data.total;
          this.carArr = data.list;
        }else {
          this.$alert(jsonResult.message,'操作失败',{
            confirmButtonText:'确定',
            callback: action =>{}
          })
        }
      })
    },
    searMileageSmall(page,pageSize) {
      this.isSelect = true;
      let url = 'http://localhost:5081/detail/searMileageSmall?'+'&page='+page+'&pageSize=' + pageSize;
      console.log(url);
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult);
        if (jsonResult.state == 200){
          let data = jsonResult.data;
          this.currentPage = data.page;
          this.total = data.total;
          this.carArr = data.list;
        }else {
          this.$alert(jsonResult.message,'操作失败',{
            confirmButtonText:'确定',
            callback: action =>{}
          })
        }
      })
    },
    searOldSmall(page,pageSize) {
      this.isSelect = true;
      let url = 'http://localhost:5081/detail/searOldSmall?'+'&page='+page+'&pageSize=' + pageSize;
      console.log(url);
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult);
        if (jsonResult.state == 200){
          let data = jsonResult.data;
          this.currentPage = data.page;
          this.total = data.total;
          this.carArr = data.list;
        }else {
          this.$alert(jsonResult.message,'操作失败',{
            confirmButtonText:'确定',
            callback: action =>{}
          })
        }
      })
    },
  },
  mounted() {
    if (localStorage.getItem('formData') != null) {
      let str = localStorage.getItem('formData');
      this.username = str.substring(9,str.indexOf("&"));
      this.isLogin = true;
    }
  },
  created: function () {
    if (location.search.indexOf("dq=") != -1) {
      let dqs = location.search.split("dq=");
      let dq = dqs[1];
      this.dq = dq;
    }
    if (location.search.indexOf("keywords=") != -1) {
      this.select.keywords = decodeURI(location.search.split("keywords=")[1]);
    }

    /*this.axios.get("http://localhost:5081/cars/list").then((response)=>{
    console.log(response.data);
    this.carArr = response.data;
  })*/
    this.searchByKeywords(1, 12);
    this.searchResult();
  },
}

</script>

<style>
* {
  margin: 0;
  padding: 0;
}


.el-menu a {
  font-size: 18px;
  text-decoration: none;
}

#logoright * {
  color: white;
  float: right;
  margin-top: 22px;
}

#login {
  margin-top: 0px;
}

.logo {
  float: left;
  width: 100px;
  display: block;
  height: 58px;
  background-image: url("/public/images/indexImage/logo.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position-y: 0px;
}

.logo:hover {
  overflow: hidden;
  background-position-y: -60px;

}

/*.dl:hover {*/
/*  background-color: #ff6d24;*/
/*  font-size: 30px;*/
/*  width: 80px;*/
/*  height: 45px;*/
/*  border-radius: 4px;*/
/*  margin-top: 10px;*/
/*  margin-left: 10px;*/
/*  text-align: center;*/
/*  box-shadow: 2px 2px 3px #ff6d24;*/
/*}*/

.el-autocomplete input {
  background-color: rgba(0, 0, 0, 0);
  border: 0px;
  color: white;
}

.el-autocomplete input::placeholder {
  color: #7f7f7f;
}

.el-divider {
  background-color: #959595;
  margin: 8px 0px;
}


.font1 a {
  font-size: 16px;
  text-decoration: none;
  color: black;
  padding: 10px;
}


.font2 a {
  margin-left: 10px;
  font-size: 15px;
  text-decoration: none;
  color: black;
  padding: 8px;
}


.font3 a {
  margin-left: 10px;
  font-size: 14px;
  text-decoration: none;
  color: black;
  padding: 18px;
}

.fontBtn img {
  width: 18px;
}

.font4 a {
  text-decoration: none;
  color: black;
  font-size: 14px;
}

.font5 {
  line-height: 40px;
}

.saleCar > div > img:hover {
  cursor: pointer;
  border-radius: 100px;
  box-shadow: 0 5px 15px #bdc3c7;
}

.label {
  color: #222222;
}

#ft_top {
  height: 170px;
  width: 900px;
  margin: 0 auto
}

#ft_bottom {
  background-color: #363636;
  height: 120px;
  width: 990px;
  margin: 0 auto;
  padding-top: 30px;
  text-align: center;
  font-size: 12px;
}

#ft_top div {
  padding-top: 30px;
  text-align: center;
  width: 300px;
  float: left;
}

#ft_top p {
  margin-bottom: 5px;
}

#ft_top h3 {
  margin-bottom: 10px;
}

#ft_bottom p {
  margin-bottom: 5px;
}

#ft_bottom a, #ft_bottom p {
  color: #FFFFFF;

}
.el-link{
  padding-right: 5px;
}



.el-menu.el-menu--horizontal{
  border-style: none;
}

.card-box{
  width: 290px;
  height: 331px;
  margin-bottom: 10px;
}
.card-box:hover{
  box-shadow: 0 8px 15px 0 rgba(0,0,0,.15);
  cursor: pointer;
}

.card-box-time {
  font-size: 13px;
  color: #999;
}

.card-box-button {
  float: right;
}

.card-box-image {
  width: 100%;
  height: 192px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
.search-box {
  display: inline-block;
  background-color: #ffffff;
  color: white !important;
  position: absolute;
  height: 27px;
  width: 200px;
  border-radius: 60px;
  padding: 5px;
}
.search-btn1 {
  position: relative;
  margin-left: 145px;
  bottom: 40px;
}
.el-autocomplete input {
  background-color: rgba(0, 0, 0, 0);
  border: 0px;
  color: #000000;
}
.neirong{
  position:inherit;
  margin-left: 20px;
}

</style>